<template>
  <div class="render-sprite">
    <canvas ref="canvas" :width="actualWidth" :height="actualHeight" />
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { SpriteRoot } from './renderStore'
// 值更新后只刷新对应图层，而不是全局重新渲染
// 用户操作类图层使用svg或者dom元素，角色渲染和动画效果使用画布

// 战斗场景
defineOptions({
  name: 'game-sprite'
})

const store = ref<SpriteRoot | undefined>(undefined)
const canvas = ref()
const actualWidth = ref(window['designWidth'])
const actualHeight = ref(window['designHeight'])

onMounted(() => {
  if (canvas.value instanceof HTMLCanvasElement) {
    store.value = new SpriteRoot({
      panel: canvas,
      designWidth: actualWidth.value,
      actualHeight: actualHeight.value
    })
  }
})

const config = (value: string, state: any) => {
  store.value?.init(value, state)
}

const setState = (state: any) => {
  store.value?.setState(state)
}
</script>

<style lang="scss">
.sprite {
  width: 100%;
  height: 100%;
}
</style>
